<template>
  <div class="wrapper">
    <div class="box"></div>
    <div class="action">
      <div class="btn" @click="test('SearchBox')">打开搜索框</div>
      <div class="btn" @click="test2('ToolBox')">打开工具箱</div>
      <div class="btn" @click="test3('SearchBox')">销毁</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import dayjs from 'dayjs'
import OneMapPanel from '@/components/007-wt-panel/index.js'
console.log('当前系统时间：', dayjs().format('YYYY-MM-DD HH:mm:ss'))
export default {
  components: {},
  props: {},
  data() {
    return {
      curKey: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    Vue.use(OneMapPanel)
  },
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    test(key) {
      if (this.curKey) {
        this.$OneMapPanel.destory(this.curKey)
      }
      setTimeout(() => {
        this.curKey = key
        this.$OneMapPanel.open({
          key: 'SearchBox',
          component: () => import('@/components/000-Test/index1.vue'),
          data: {
            closeIcon: true,
            width: '400px',
            height: '400px',
            position: {
              top: '130px',
              left: '150px'
            }
          }
        })
      }, 1000)
    },
    test2(key) {
      if (this.curKey) {
        this.$OneMapPanel.destory(this.curKey)
      }
      this.curKey = key
      this.$OneMapPanel.open({
        key: 'ToolBox',
        component: () => import('@/components/000-Test/index2.vue'),
        data: {
          closeIcon: true,
          width: '400px',
          height: '400px',
          position: {
            top: '130px',
            right: '150px'
          }
        }
      })
    },
    test3() {
      if (this.curKey) {
        this.$OneMapPanel.destory(this.curKey)
      }
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
@mixin oneline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrapper {
  height: 100%;
  position: relative;
  border: 1px solid #000;
  .box {
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
  }
}
</style>
